<template>
	<view class="charts-box">
		<qiun-data-charts type="arcbar" :chartData="chartData" :opts="opts" background="none" :animation="false" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opts: {
					"type": "arcbar",
					"canvasId": "",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc"
					],
					"rotate": false,
					"reserve": false,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"title": {
						"name": "",
						"fontSize": 25,
						"color": "#00FF00",
						"offsetX": 0,
						"offsetY": 0
					},
					"subtitle": {
						"name": "充电中",
						"fontSize": 20,
						"color": "#666666",
						"offsetX": 0,
						"offsetY": 0
					},
					"extra": {
						"arcbar": {
							"type": "circle",
							"width": 15,
							"backgroundColor": "#E9E9E9",
							"startAngle": 0.75,
							"endAngle": 0.25,
							"gap": 2,
							"centerX": 0,
							"centerY": 0,
							"linearType": "none"
						}
					}
				},
				chartData: {
					"series": [{
						"name": "充电率",
						"data": 0.68,
						"color": "#2fc25b"
					}]
				}
			};
		}
	}
</script>

<style>
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 100%;
		height: 200px;
	}
</style>
